<template>
  <el-drawer :title="dialogTitle" v-model="dialogVisible">
    <el-table
      :data="tableData.list"
      size="large"
      v-loading="tableData.loading"
      @selection-change="handleSelectionChange"
    >
      <template #empty>
        <span>{{ !tableData.loading ? '没有相关数据' : '' }}</span>
      </template>
      <el-table-column type="selection" with="55" />
      <el-table-column label="赠品信息" min-width="180">
        <template #default="{ row }">
          <p>{{ row.name }}</p>
          <p class="text-sm text-gray-500">{{ row.note }}</p>
        </template>
      </el-table-column>
      <el-table-column label="所属店铺" min-width="120">
        <template #default="{ row }">
          <div class="flex flex-col items-start justify-start">
            <img
              class="w-[50px] h-[50px] mr-[10px] border border-solid border-gray-50"
              :src="row.shop?.logo || '/placeholder.png'"
              alt=""
            />
            <span>{{ row.shop?.name || '未知' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="领取限制" min-width="150">
        <template #default="{ row }">
          <div class="flex flex-row items-center">
            <el-tag type="primary">{{ row.typeName }}</el-tag>
            <div v-if="row.price > 0" class="ml-5px"
              >含成本 <span class="text-orange-500">¥{{ fenToYuan(row.price) }}</span></div
            >
            <span v-else class="ml-5px text-green-500">免费</span>
          </div>
          <p>每人限领 {{ row.takeLimitCount }} {{ row.unit }}</p>
        </template>
      </el-table-column>
      <el-table-column label="生效时间" align="center" prop="startTime" min-width="170">
        <template #default="{ row }">
          <el-tag v-if="row.valid" type="success">已生效</el-tag>
          <el-tag v-if="!row.valid && !row.invalid" type="warning">待生效</el-tag>
          <br />
          <span class="ml-5px">{{ formatTime(row.startTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="作废时间" align="center" min-width="170">
        <template #default="{ row }">
          <el-tag v-if="row.invalid" type="warning">已作废</el-tag>
          <el-tag v-else type="success">待作废</el-tag>
          <br />
          <span class="ml-5px">{{ formatTime(row.endTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button @click="submitForm" type="primary">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </el-drawer>
</template>
<script setup lang="ts" name="GiftSelect">
import * as GiftActivityApi from '@/api/mall/promotion/gift/activity'
import { fenToYuan, formatTime } from '@/utils'

const props = defineProps<{
  multipleSelection?: any[]
}>()
const emit = defineEmits<{
  (e: 'update:multipleSelection', v: any[]): void
  (e: 'change', v: any[]): void
}>()

const dialogVisible = ref(false)
const dialogTitle = ref('')

const tableData = reactive({
  loading: true,
  list: [],
  searchParam: {}
})

const loadTableData = () => {
  tableData.loading = true
  GiftActivityApi.getListForPick()
    .then((res: any) => {
      tableData.loading = false
      tableData.list = res
    })
    .catch(() => {
      tableData.loading = false
    })
}

const open = () => {
  dialogVisible.value = true
  dialogTitle.value = '选择引流赠品'
  loadTableData()
}
defineExpose({ open })

const selectedList = ref<any[]>([])
const handleSelectionChange = (val: any[]) => {
  if (props.multipleSelection) {
    emit('update:multipleSelection', val)
    return
  }
  selectedList.value = val
}
const submitForm = () => {
  dialogVisible.value = false
  emit('change', selectedList.value)
}
</script>
